<template>

    <div class="tw-libtext"
    :style="style">
    <!-- v-if="tableStyleFlag" -->
    <div class="tw-libtext-title" v-if="tableStyleFlag">
      <div :style="{color: colors[0]}" class="tw-title-txet">
      今日受理总量: <span> {{slNum}}件</span>
    </div>
    <div :style="{color: colors[1]}" class="tw-title-txet">
      今日办结总量: <span> {{bjNum}}件</span>
    </div>
    <div :style="{color: colors[2]}" class="tw-title-txet">
      当前待办总量: <span> {{dbNum}}件</span>
    </div>
    <br>
    <div :style="{color: colors[0]}" style="display: inline-block; font-size: 16px">
      (其中投诉举报: <span style="font-weight: 700">{{tsjbNum}}</span>)
    </div>

    <div class="tw-title-last" style="font-size: 16px;">
      (其中即将超期: <span style="font-weight: 700">{{cqNum}}</span>)
    </div>
    </div>

    <div class="tw-white-title" v-else>
      <div class="tw-white-txet">
        今日受理总量<p> {{slNum}}件</p>
      </div>
      <div class="tw-white-txet">
        今日办结总量<p> {{bjNum}}件</p>
      </div>
      <div class="tw-white-txet">
        当前待办总量<p> {{dbNum}}件</p>
      </div>
      <!-- <div class="tw-white-txet">
        其中投诉举报<p> {{tsjbNum}}件</p>
      </div>
      <div class="tw-white-txet">
        其中即将超期<p> {{cqNum}}件</p>
      </div> -->
    </div>

    <div class="tw-libtext-table" :class="{xstyle: !tableStyleFlag}" :style="{width: tableWidth}">
     <header :style="{textAlign: alignText}">
       <h3>渠道</h3>
       <h3>受理(件)</h3>
       <h3>办结(件)</h3>
       <h3>待办(件)</h3>
     </header>

       <div :style="{backgroundColor: bgColor, textAlign: alignText}" class="tw-libtext-table-body" v-for="item in dataList" :key="item.qd">
         <span>{{ toName(item.qd) }}</span>
         <span :style="{color: colors[0]}">{{item.drsls}}</span>
         <span :style="{color: colors[1]}">{{item.drbls}}</span>
         <span :style="{color: colors[2]}">{{item.drdbs}}</span>
       </div>
    </div>
   </div>

</template>

<script>
import props from './props'

export default {
  name: 'statistical-title',

  props,

  data() {
    return {
      interval: null,
      slNum: 0,
      bjNum: 0,
      dbNum: 0,
      tsjbNum: 0,
      cqNum: 0,
      dataList: [],
      flag: null
    }
  },

  computed: {
    style () {
      return {
        background: this.bgColor,
        alignText: this.alignText
      }
    },

    postParams () {
      return {
        intervalTime: this.intervalTime,
        postUrl: this.postUrl
      }
    }
  },

  methods: {
    // 梁道排序（目前固定写死）
    // 1'阳光服务平台'
    // 2'实体平台'
    // 3'12345'
    // 4'信访信息系统'
    // 5'转交办'
    toName (index) {
      if (index === '1') {
        return '阳光服务平台'
      } else if (index === '2') {
        return '实体平台'
      } else if (index === '3') {
        return '12345'
      } else if (index === '4') {
        return '信访信息系统'
      } else if (index === '5') {
        return '转交办'
      }
    },

    getTableData () {
      const path = `${window.$twApp.gateway + this.postUrl}`
      this.dataList = []
      window.axios.post(path, {})
        .then(resp => {
          if (resp && resp.data.pageInfo.list.length > 0) {
            // this.dataList = resp.data.pageInfo.list
            this.slNum = 0
            this.bjNum = 0
            this.dbNum = 0
            this.tsjbNum = 0
            this.cqNum = 0
            for (let i = 0; i < resp.data.pageInfo.list.length; i++) {
              const item = resp.data.pageInfo.list[i]
              const a = Object.assign({ drsls: 0, drbls: 0, drdbs: 0, drsls_tsjb: 0, drdbs_cq: 0 }, { ...item })
              this.slNum += item.drsls ? item.drsls : 0
              this.bjNum += item.drbls ? item.drbls : 0
              this.dbNum += item.drdbs ? item.drdbs : 0
              this.tsjbNum += item.drsls_tsjb ? item.drsls_tsjb : 0
              this.cqNum += item.drdbs_cq ? item.drdbs_cq : 0
              this.dataList.push(a)
            }

            if (this.intervalTime && this.intervalTime !== '') {
              setTimeout(this.getTableData, this.intervalTime * 1000)
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  },

  mounted () {
    this.getTableData()

    // if (this.intervalTime && !isNaN(+this.intervalTime) && +this.intervalTime > 1 && this.postUrl) {
    //   this.interval = setInterval(() => {
    //     setTimeout(this.getTableData, 0)
    //   }, this.intervalTime * 1000)
    // }
  },

  beforeDestroy () {
    clearInterval(this.interval)
    this.interval = null
  },

  watch: {
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
